﻿@using Backend.JYD.Model
<style type="text/css">
 .dtree {
	font-size: 11px; color: #666; font-family: verdana, geneva, arial, helvetica, sans-serif; white-space: nowrap
}
.dtree img {
	border-right: 0px; border-top: 0px; vertical-align: middle; border-left: 0px; border-bottom: 0px;
}
.dtree a {
	color: #333; text-decoration: none
}
.dtree a.node {
	padding-right: 2px; padding-left: 2px; padding-bottom: 1px; padding-top: 1px; white-space: nowrap
}
.dtree a.nodesel {
	padding-right: 2px; padding-left: 2px; padding-bottom: 1px; padding-top: 1px; white-space: nowrap
}
.dtree a.node:hover {
	color: #333; text-decoration: underline
}
.dtree a.nodesel:hover {
	color: #333; text-decoration: underline
}
.dtree a.nodesel {
	background-color: #c0d2ec
}
.selectnode
{
    color:red;
}
.dtree .clip {
	overflow: hidden
}

</style>
@{
    var nodes = this.ViewBag.TreeNodes as List<TreeNodeInfo>;
}
@if(nodes!= null && nodes.Count>0) {
    
    //判断是否存在一个节点是展开的，如果又，将其父节点设置为展开
    List<TreeNodeInfo> exps = nodes.FindAll(p=>p.Expanded);
    if(exps != null && exps.Count>0)
    {
        foreach(var exp in exps)
        {
            var parent = nodes.Find(p=>exp.ParentId.HasValue && exp.ParentId.Value == p.Id);
            while(parent != null)
            {
                parent.Expanded = true;
                parent = nodes.Find(p=>parent.ParentId.HasValue && parent.ParentId.Value == p.Id);
            }
        }
        
        //int selectNodeId = 0;
        //顶级节点必须有
        List<TreeNodeInfo> tops = nodes.FindAll(r => r.ParentId == null || r.ParentId.Value<=0);
        foreach (var top in tops)
        {
            if (null != top)
            {
            <div  style='font-size: 11px; color: #666; font-family: verdana, geneva, arial, helvetica, sans-serif; white-space: nowrap' >
                <div>
                    <a style="color: #333; text-decoration: none;font-size: 11px;"  href="javascript:ndclk(@top.Id)">
                        <img id="@("igroupTree"+top.Id)" alt="" src="/skin/tree/folder_group_open.gif"  style="border-right: 0px; border-top: 0px; vertical-align: middle; border-left: 0px; border-bottom: 0px;font-size: 11px;" />
                    </a>
                    @top.Name
                </div>
                <div   id="@("dgroupTree"+top.Id)"  style='overflow: hidden;display: block;font-size: 11px;' >
                    @{
                        List<TreeNodeInfo> children = nodes.FindAll(r => r.ParentId == top.Id);
                        if (null != children && children.Count > 0)
                        {
                            //foreach (var child in children)
                            for (int i = 0; i < children.Count; i++)
                            {
                                var before = new List<string>();
                                var child = children[i];
                                <div>
                                    <a href="javascript:ndclk(@child.Id)" style="width:22px;color: #333; text-decoration: none;font-size: 11px;">
                                    @if(child.IsLeaf)
                                    {
                                        if(i ==children.Count-1)
                                        {
                                            before.Add("joinbottom");
                                            <img alt="" src="/skin/tree/joinbottom.gif" style="border-right: 0px; border-top: 0px; vertical-align: middle; border-left: 0px; border-bottom: 0px;font-size: 11px;" />
                                        }
                                        else
                                        {
                                            before.Add("join");
                                            <img alt="" src="/skin/tree/join.gif" style="border-right: 0px; border-top: 0px; vertical-align: middle; border-left: 0px; border-bottom: 0px;font-size: 11px;" />
                                        }
                                    }
                                    else
                                    {
                                        if(i ==children.Count-1)
                                        {
                                            if(child.Expanded)
                                            {
                                                <img alt="" src="/skin/tree/minusbottom.gif" id="@("jgroupTree" + child.Id)" style="border-right: 0px; border-top: 0px; vertical-align: middle; border-left: 0px; border-bottom: 0px;font-size: 11px;"/>
                                            }
                                            else
                                            {
                                                <img alt="" src="/skin/tree/plusbottom.gif" id="@("jgroupTree" + child.Id)" style="border-right: 0px; border-top: 0px; vertical-align: middle; border-left: 0px; border-bottom: 0px;font-size: 11px;"/>
                                            }
                                        }
                                        else
                                        {
                                            if(child.Expanded)
                                            {
                                                <img alt="" src="/skin/tree/minus.gif" id="@("jgroupTree" + child.Id)" style="border-right: 0px; border-top: 0px; vertical-align: middle; border-left: 0px; border-bottom: 0px;font-size: 11px;"/>
                                            }
                                            else
                                            {
                                                <img alt="" src="/skin/tree/plus.gif" id="@("jgroupTree" + child.Id)" style="border-right: 0px; border-top: 0px; vertical-align: middle; border-left: 0px; border-bottom: 0px;font-size: 11px;"/>
                                            }
                                        }
                                    }
                                </a>
                                <a   href="javascript:ndclk(@child.Id)" style="color: #333; text-decoration: none;font-size: 11px;">
                                    @if(child.Expanded)
                                    {
                                        <img alt="" src="/skin/tree/folder_group_open.gif" id="@("igroupTree" + child.Id)" style="border-right: 0px; border-top: 0px; vertical-align: middle; border-left: 0px; border-bottom: 0px;font-size: 11px;"/>
                                    }
                                    else
                                    {
                                        <img alt="" src="/skin/tree/folder_group_close.gif" id="@("igroupTree" + child.Id)" style="border-right: 0px; border-top: 0px; vertical-align: middle; border-left: 0px; border-bottom: 0px;font-size: 11px;"/>
                                    }
                                </a>
                                <a id="@("sgroupTree" + child.Id)"  onmouseout="javascript:this.style.textDecoration='none';"   onmouseover="javascript:this.style.textDecoration='underline';"  @(string.IsNullOrWhiteSpace(child.NodeUrl) ? string.Empty : "href = \"" + child.NodeUrl + "\"")  style="padding-right: 2px; padding-left: 2px; padding-bottom: 1px; padding-top: 1px; white-space: nowrap;color: #333; text-decoration: none;font-size: 11px;">@child.Name</a>
                        </div>
                                if(!child.IsLeaf)
                                {
                                    List<TreeNodeInfo> childNodes = nodes.FindAll(r => r.ParentId == child.Id);
                                    <div id="@("dgroupTree"+child.Id)" style="overflow: hidden;display: @(child.Expanded ? "block" : "none");font-size: 11px;">
                                    @for (int j = 0; j < childNodes.Count; j++)
                                    {
                                        var node = childNodes[j];
                                        <div>
                                        @if (i == children.Count - 1)
                                        {
                                             <img alt="" src="/skin/tree/wite.gif" style="border-right: 0px; border-top: 0px; vertical-align: middle; border-left: 0px; border-bottom: 0px;font-size: 11px;" />
                                        }
                                        else
                                        {
                                            <img alt="" src="/skin/tree/line.gif" style="border-right: 0px; border-top: 0px; vertical-align: middle; border-left: 0px; border-bottom: 0px;font-size: 11px;" />
                                        }
                                        @if (j == childNodes.Count - 1)
                                        {
                                            <img alt="" src="/skin/tree/joinbottom.gif" style="border-right: 0px; border-top: 0px; vertical-align: middle; border-left: 0px; border-bottom: 0px;font-size: 11px;" />
                                        }
                                        else
                                        {
                                            <img alt="" src="/skin/tree/join.gif" style="border-right: 0px; border-top: 0px; vertical-align: middle; border-left: 0px; border-bottom: 0px;font-size: 11px;" />
                                        }
                                        <a  href=javascript:ndclk(@node.Id) style="color: #333; text-decoration: none;font-size: 11px;">
                                        @if(node.Expanded)
                                        {
                                             <img id="@("igroupTree"+node.Id)" alt="" src="/skin/tree/folder_group_open.gif" style="border-right: 0px; border-top: 0px; vertical-align: middle; border-left: 0px; border-bottom: 0px;font-size: 11px;" />
                                        }
                                        else
                                       {
                                             <img id="@("igroupTree"+node.Id)" alt="" src="/skin/tree/folder_group_close.gif" style="border-right: 0px; border-top: 0px; vertical-align: middle; border-left: 0px; border-bottom: 0px;font-size: 11px;" />
                                        }
                                        </a>
                                        <a id="@("sgroupTree" + node.Id)" onclick=javascript:selectNode(@node.Id);  onmouseout="javascript:this.style.textDecoration='none';"   onmouseover="javascript:this.style.textDecoration='underline';"  @(string.IsNullOrWhiteSpace(child.NodeUrl) ? string.Empty : "href = \"" + child.NodeUrl + "\"")  style="padding-right: 2px; padding-left: 2px; padding-bottom: 1px; padding-top: 1px; white-space: nowrap;color: #333; text-decoration: none;font-size: 11px;">@child.Name</a>
                                       </div>
                                    }
                                    </div>
                                }
                            }
                        }
                    }
                </div>
            </div>
            }
        }
    }
}


<script type="text/javascript">
    var currentIndex = 0;
    var currentcloseImage = "";
    function ndclk(index, openImage, closeImage) {
        if (document.getElementById('dgroupTree' + index) != null) {
            if (document.getElementById('dgroupTree' + index).style.display == 'none') {
                document.getElementById('dgroupTree' + index).style.display = 'block';
                if (document.getElementById('igroupTree' + index) != null) {
                    document.getElementById('igroupTree' + index).src = "/skin/tree/folder_group_open.gif";
                }
                if (document.getElementById('jgroupTree' + index) != null) {
                    document.getElementById('jgroupTree' + index).src = document.getElementById('jgroupTree' + index).src.replace("plus", "minus");
                }
            } else {
                document.getElementById('dgroupTree' + index).style.display = 'none';
                if (document.getElementById('igroupTree' + index) != null) {
                    document.getElementById('igroupTree' + index).src = "/skin/tree/folder_group_close.gif";
                }
                if (document.getElementById('jgroupTree' + index) != null) {
                    document.getElementById('jgroupTree' + index).src = document.getElementById('jgroupTree' + index).src.replace("minus", "plus");
                }
            }
        }
    }
    function selectNode(index, openImage, closeImage) {
        if (document.getElementById('sgroupTree' + currentIndex) != null) {
            document.getElementById('sgroupTree' + currentIndex).style.color = "#333";
        }
        if (document.getElementById('sgroupTree' + index) != null) {
            document.getElementById('sgroupTree' + index).style.color = "Red";
        }
        if (document.getElementById('igroupTree' + currentIndex) != null) {
            if (currentcloseImage != "") {
                document.getElementById('igroupTree' + currentIndex).src = "/skin/tree/folder_group_close.gif";
            }
        }
        if (document.getElementById('igroupTree' + index) != null) {
            document.getElementById('igroupTree' + index).src = "/skin/tree/folder_group_close.gif";
        }
        currentIndex = index;
        currentcloseImage = "/skin/tree/folder_group_close.gif";
    }

    function o(index) {
        if (document.getElementById('dgroupTree' + index) != null) {
            if (document.getElementById('dgroupTree' + index).style.display == 'none') {
                document.getElementById('dgroupTree' + index).style.display = 'block';

            } else {
                document.getElementById('dgroupTree' + index).style.display = 'none';
            }
            if (document.getElementById('igroupTree' + currentIndex) != null) {

            }
        }
    }
</script>
            
